<template>
  <el-dialog
  :title="isTelLogin && '手机号登录' || isReg && '手机号注册' || '登录'"
  :visible="showLogin"
  :append-to-body='true'
  :show-close='true'
  @close="closeLogin"
  width="30%">

    <!-- 手机号登录 -->
    <div class="tellogin" v-if="isTelLogin">
        <el-form :model="formData">
            <el-form-item>
                <el-input placeholder="请输入手机号" v-model="formData.telNumber">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-input placeholder="请输入密码" v-model="formData.password" type="password"></el-input>
            </el-form-item>

            <el-row>
                <el-col :span="18">
                    <template>
                        <!-- `checked` 为 true 或 false -->
                        <el-checkbox v-model="isRemeber">记住密码</el-checkbox>
                    </template>
                </el-col>
                <el-col :span="6">
                    <el-link type="info">忘记密码？</el-link>
                </el-col>
            </el-row>

            <el-row style="margin-bottom: 15px; margin-top: 15px" class="linecenter">
                <el-button type="primary" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
            </el-row>

            <el-row>
                <el-col :span="16">
                    <el-link type="primary" @click="isTelLogin = false">《其他登录方式</el-link>
                </el-col>
                <el-col :span="8">
                    <el-link type="info">没有账号?免费注册》</el-link>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <!-- 手机号登录 -->

    <!-- 注册 -->
    <div class="register linecenter" v-else-if="isReg">
        <el-form style="width:300px" :model="RegData">
            <el-row style="line-height:36px">
                <el-col>手机号：</el-col>
            </el-row>
            <el-form-item size="small">
                <el-input placeholder="请输入手机号" v-model="RegData.phone"></el-input>
            </el-form-item>
            <el-row style="line-height:36px">
                <el-col >密码：</el-col>
            </el-row>
            <el-form-item size="small">
                <el-input placeholder="设置登录密码 不少于8位" v-model="RegData.password" type="password"></el-input>
            </el-form-item>
            <el-row>
                <el-button class="linecenter" type="primary" style="width:100%;height:30px;margin-bottom:5px">下一步</el-button>
            </el-row>
            <el-row style="margin-top:5px">
                <el-link @click="isReg = false">《返回登录</el-link>
            </el-row>
        </el-form>

    </div>
    <!-- 注册 -->

    <!-- 登录主页 -->
    <div class="login" v-else>
        <el-row style="height:300px">
            <el-col :span="12" style="height:30px">
                <el-image
                    style="width: 100%;"
                    :src="require('../../assets/loginphoto.jpg')"
                    fit="contain">
                </el-image>
                <el-button @click="ifTel" type="primary" style="margin-bottom:5px;margin-top:5px">手机号登录</el-button>
                <el-button @click="ifReg">注册</el-button>
            </el-col>

            <el-col :span="12" style="height:205px; flex-direction: column;" class="linecenter">
                <ul>
                    <li>
                        <img src="../../assets/微信.jpg" alt="">
                        <el-link> 微信登录</el-link>
                    </li>
                    <li>
                        <img src="../../assets/qq.jpg" alt="">
                        <el-link> qq登录</el-link>
                    </li>
                    <li>
                        <img src="../../assets/微博.jpg" alt="">
                        <el-link> 微博登录</el-link>
                    </li>
                    <li>
                        <img src="../../assets/网易.jpg" alt="">
                        <el-link> 网易邮箱登录</el-link>
                    </li>
                </ul>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <template>
                    <!-- `checked` 为 true 或 false -->
                    <el-checkbox v-model="checked"></el-checkbox>
                </template>
                <span style="font-size: 12px; color: rgba(0,0,0,0.4);">同意</span>
                <el-link href="https://st.music.163.com/official-terms/service" target="_blank">《服务条款》</el-link>
                <el-link href="https://st.music.163.com/official-terms/privacy" target="_blank">《隐私政策》</el-link>
                <el-link href="https://st.music.163.com/official-terms/children" target="_blank">《儿童隐私政策》</el-link>
            </el-col>
        </el-row>
    </div>
    <!-- 登录主页 -->
  </el-dialog>
</template>

<script>
import { login } from '../../api/user.js'
export default {
  props: {
    showLogin: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      isTelLogin: false, //  显示手机号登录
      isReg: false, //  显示注册菜单
      checked: false, //  确认勾选协议
      isRemeber: false, // 记住密码
      formData: {
        telNumber: '', //  手机号
        password: '' //   密码
      },
      RegData: {
        phone: '',
        password: ''
      }
    }
  },
  methods: {
    ifTel () {
      this.checked ? this.isTelLogin = true : this.$message('请先勾选同意 《服务条款》 《隐私政策》 《儿童隐私政策》')
    },
    ifReg () {
      this.checked ? this.isReg = true : this.$message('请先勾选同意 《服务条款》 《隐私政策》 《儿童隐私政策》')
    },
    //  登录
    async login () {
      // 2.校验
      try {
        const res = await login({
          phone: this.formData.telNumber,
          password: this.formData.password
        })

        if (res.data.code === 502) {
          return this.$message.error(res.data.msg)
        }
        this.$store.commit('setUser', res.data)
        this.$emit('refresh')
        this.$message.success('登录成功')
        this.closeLogin()
      } catch (error) {
        console.log('登录错误', error)
      }
    },
    //  关闭
    closeLogin () {
      this.$emit('update:showLogin', false)
    }
  }
}
</script>

<style lang="less" scoped>
    /deep/ .el-dialog__header{
        background: #333;
        .el-dialog__title{
            color: #fff;
        }
    }
    .el-link {
        font-size: 12px;
    }
    .linecenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .lineleft {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .tellogin {
        .el-button {
            display: flex;
            justify-content: center;
            align-items: center;
            margin:0px;
            width:80%;
            height:30px;
        }
    }
    .login{
        .el-button {
            display: flex;
            justify-content: center;
            align-items: center;
            margin:0px;
            width:100%;
            height:30px;
        }
        .el-link {
            color: #507DAF;
        }
        .el-option {
            width: 300px;
        }

        ul{
            li{
                img {
                    width: 45px;
                    height: 45px;
                }
                .el-link {
                    margin-left: 15px;
                }
            }
        }
    }

</style>
